﻿var Select = {
    model: function (d = {}) {
        this.Title = d.Title || "下拉单项选择";
        this.EnTitle = d.EnTitle || "";
        this.Group = d.Group || "";
        this.Tips = d.Tips || "";
        this.Name = d.Name || 'lg' + lg.GetSN(6, 10);
        this.Value = d.Value || "";
        this.ExportName = d.ExportName || "";
        this.Width = d.Width || "100%";
        this.Required = d.Required || false;
        this.IsRender = d.IsRender != undefined ? d.IsRender : true;
        this.IsShow = d.IsShow || false;
        this.IsExport = d.IsExport || false;
        this.IsWhere = d.IsWhere || false;
        this.WhereKey = d.WhereKey || "精确匹配";
        this.Options = d.Options || [
            {
                Text: "选项1",
                Id: lg.GetSN(6, 10),
                ControlItems: [],
                Icon: "",
                NeedOtherValue: false
            },
            {
                Text: "选项2",
                Id: lg.GetSN(16, 8),
                ControlItems: [],
                Icon: "",
                NeedOtherValue: false
            }
        ];
        this.Display = d.Display || "inline";
        this.IconOptions = d.IconOptions || false;
    },
    component: {
        name: "lg-form-select",
        data: {
            props: {
                items: {
                    type: Array,
                    default: []
                },
                value: {
                    default: ""
                },
                data: {
                    type: Object,
                    default: {}
                },
                valType: {
                    type: String,
                    default: "option"
                },
                //0填写 1查看
                renderType: {
                    type: Number,
                    default: 0
                }
            },
            computed: {
                text: function () {
                    if (this.value != undefined && this.value != null && this.value != null) {
                        if (this.valType == "option") {
                            return this.value.value;
                        } else {
                            var arr = this.data.Options.filter(p => p.Value == this.value || p.Text == this.value);
                            if (arr.length > 0) {
                                return arr[0].Text;
                            }
                        }
                    }
                    return ""
                }
            },
            methods: {
                OnSelected: function (item) {
                    if (this.valType == "option") {
                        var process = [];
                        if (this.value) {//当前项已有选中值
                            if (this.value.opid != item.Id) {//选中值未发生变化
                                //恢复原选项的控制项为隐藏状态
                                var options = this.data.Options.filter(p => p.Id == this.value.opid);
                                if (options.length > 0) {
                                    var option = options[0];
                                    for (let i in option.ControlItems) {
                                        process.push({ name: option.ControlItems[i], state: false })
                                    }
                                }
                                //将当前选项的控制项设为显示状态
                                this.$emit("update:value", { opid: item.Id, value: item.Value || item.Text });
                                this.$emit("done", this.data);
                                if (item.ControlItems.length > 0) {
                                    for (let i in item.ControlItems) {
                                        process.push({ name: item.ControlItems[i], state: true })
                                    }
                                }
                            }
                        } else {//当前项没有选中值
                            //将当前选项的控制项设为显示状态
                            this.$emit("update:value", { opid: item.Id, value: item.Value || item.Text });
                            this.$emit("done", this.data);
                            if (item.ControlItems.length > 0) {
                                for (let i in item.ControlItems) {
                                    process.push({ name: item.ControlItems[i], state: true })
                                }
                            }
                        }

                        if (process.length > 0) {
                            for (let i in process) {
                                var name = process[i].name;
                                var arr = this.items.filter(p => p.Data.Name == name)
                                if (arr.length > 0) {
                                    arr[0].Data.IsRender = process[i].state;
                                }
                            }
                        }
                    }
                    else {
                        var vdata = item.Value || "";
                        console.log(vdata);
                        if (vdata != this.value) {
                            this.$emit("update:value", vdata);
                            this.$emit("done", this.data);
                        }

                    }
                },
                isSelected: function (item) {
                    if (this.valType == "option") {
                        if (this.value) {
                            return this.value.opid == item.Id
                        } else {
                            return false;
                        }
                    } else {
                        var value = item.Value || item.Text;
                        return this.value == value;
                    }
                }
            },
            template: `
					 <div :class="['lg-form-item',{'lg-ver-error':data.error},{'pointer-none':renderType==1}]" :style="{'width':data.Width}">
						<div class="lg-form-block">
						    <div class="lg-form-title">
						  	    <div class="lg-form-title-item">
                        	  	    <i v-if="data.Required">*</i>
			            	  	    <span class="cn">{{data.Title}}</span>
                        	  	    <span class="en">{{data.EnTitle}}</span>
			         	  	    </div>
					  	    </div>
						    <div class="lg-form-control">
                                <div class="lg-form-select">
							        <div class="lg-select-title">
								        <input type="text" readonly="readonly" class="lg-input lg-input-text" :value="text"/>
								        <label class="fa fa-caret-down" for="lg-select-list"></label>
							        </div>
                                    <div class="lg-select-list-position lg-select-position" style="display:none">
							            <ul class="lg-select-list">
								            <li :class="['option',{'selected':isSelected(item)}]" v-for="item in data.Options" v-on:click="OnSelected(item)">{{item.Text}}</li>
							            </ul>
                                    </div>
                                </div>
						    </div>
						</div>
						<div class="lg-form-block">
					        <div class="lg-form-tip"><p>{{data.Tips}}</p></div>
					        <div class="lg-form-ver" v-if="data.error">{{data.errMsg}}</div>
						</div>
					</div>
                    `
        }
    }
}

Select.model.prototype.verify = function () {
    var res = { state: true, msg: "ok" };
    if (this.Required) {
       var val = typeof this.Value == "object" ? this.Value.value : this.Value;
        if (val == undefined || val == "") {
            res.state = false;
            res.msg = "必填项不可为空!";
            return res;
        }

    }
    return res
}
Select.model.prototype.getValue = function () {
    return this.Value;
}
Select.model.prototype.setValue = function (data) {
    var val = data[this.Name];
    if (typeof val == "object") {
        this.Value = val;
    } else {
        this.Value = lg.convert.toJson(val, "");
    }

}

export { Select }